<template>
  <viewer class="c-image" :style="style">
    <img v-lazy="imgUrl" @click="show" :key="imgUrl.src" :style="style" alt="" v-if="lazy"/>
    <img :src="url" :style="style" alt="" v-else/>
  </viewer>
</template>
<script>
export default {
  name: "cImage",
  props: {
    url: {type: String, default: ''},
    width: {type: String, default: '100%'},
    height: {type: String, default: '100%'},
    radio: {type: String, default: ''},
    lazy: {type: Boolean, default: true},
  },
  computed: {
    style() {
      return {
        width: this.width,
        height: this.height,
        borderRadius: this.radio
      }
    },
    imgUrl() {
      return {
        src: this.url || require('@/assets/images/cover.png'),
        error: require('@/assets/images/cover.png'),
        loading: require('@/assets/images/cover.png')
      }
    }
  },
  methods: {
    show() {
      this.$viewerApi({
        images: [this.url],
        options: {
          toolbar: {
            zoomIn: false,
            zoomOut: false,
            oneToOne: false,
            reset: true,
            prev: true,
            play: false,
            next: false,
            rotateLeft: true,
            rotateRight: true,
            flipHorizontal: true,
            flipVertical: true,
            fullscreen: false,
            close: false
          }
        },
      })
    }
  }
}
</script>

<style scoped lang="scss">
.c-image {
  width: 100%;
  height: 100%;
  cursor: pointer;
}
</style>
